iT邦幫忙

DAY 10
5

30天掌握Sass語法系列 第 10

30天掌握Sass語法 - (10)如何建立自己的Sass Reset CSS

  • 分享至 

  • xImage
  •  

以目前坊間最有名的Reset CSS不外乎是
myer所發表的Reset.css
http://meyerweb.com/eric/tools/css/reset/

以及目前最夯的HTML5 normalize.css,
http://necolas.github.io/normalize.css/
我自己目前是normalize當基底,但也加一些myer的設定,

為什麼需要合併多種版本的reset來使用呢?
因為reset CSS通常還必須結合網頁設計師寫程式的習慣才較符合工作流程,
以我來說,由於normalize的並沒有針對ul去做設定,
所以你如果使用了ul li的話,左側仍然有實心圓,
但因為我自己做網站是習慣預設清空,
所以我就又用了myer寫ul的reset的程式碼來去清空實心圓:

ol, ul {
	list-style: none;
}

但以目前的Reset css都還沒釋出Sass的版本,
除了去Github搜尋別人整理好的,
也可以使用這個網站來將CSS編譯成Sass:
http://css2sass.heroku.com/
把CSS貼上去後,再按下面的Convert 2 SASS就會自動編譯出SASS出來,

相關的流程可以瀏覽此影片:
Yes
以目前坊間最有名的Reset CSS不外乎是
myer所發表的Reset.css
http://meyerweb.com/eric/tools/css/reset/

以及目前最夯的HTML5 normalize.css,
http://necolas.github.io/normalize.css/
我自己目前是normalize當基底,但也加一些myer的設定,

為什麼需要合併多種版本的reset來使用呢?
因為reset CSS通常還必須結合網頁設計師寫程式的習慣才較符合工作流程,
以我來說,由於normalize的並沒有針對ul去做設定,
所以你如果使用了ul li的話,左側仍然有實心圓,
但因為我自己做網站是習慣預設清空,
所以我就又用了myer寫ul的reset的程式碼來去清空實心圓:

ol, ul {
	list-style: none;
}

但以目前的Reset css都還沒釋出Sass的版本,
除了去Github搜尋別人整理好的,
也可以使用這個網站來將CSS編譯成Sass:
http://css2sass.heroku.com/
把CSS貼上去後,再按下面的Convert 2 SASS就會自動編譯出SASS出來,

相關的流程可以瀏覽此影片:
Yes

網頁設計師都會有自己的撰寫HTML與CSS習慣,
例如全域行距是1.8,預設字型是16px等等之類的,
而這種設定也會納入為自己的全域控制reset設定,

所以建立好自己的Sass Reset後,
你也可以把一些全域設定的部分給抽離出來做為變數,
像是將文字連結顏色、行距、字距、預設顏色、外圍寬度等都設定為變數,
這樣你就不會在茫茫碼海裡面找出你要修改的code,
日後開新專案時,如果有較特殊的設定,
你就直接修改變數就好,就不用再去追code了。
變數與@import規劃得好,眼睛疲勞度相對也會降低許多,
所以從現在起,開始規劃你的全域SASS變數吧^_^!

PS:另附上變數融入到Reset的撰寫流程,以及釋出自己的Sass Reset提供各位參考學習。
Yes

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
  margin: 0
  padding: 0
  border: 0
  font: inherit
  vertical-align: baseline

ol, ul
  list-style: none

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary
  display: block

audio, canvas, video
  display: inline-block

audio:not([controls])
  display: none
  height: 0

[hidden]
  display: none

a
  &:focus
    outline: thin dotted
  &:active, &:hover
    outline: 0

abbr[title]
  border-bottom: 1px dotted

b, strong
  font-weight: bold

dfn
  font-style: italic

hr
  -moz-box-sizing: content-box
  box-sizing: content-box
  height: 0

mark
  background: #ff0
  color: #000

code, kbd, pre, samp
  font-family: monospace, serif
  font-size: 1em

pre
  white-space: pre-wrap

q
  quotes: "\201C" "\201D" "\2018" "\2019"

small
  font-size: 80%

sub
  font-size: 75%
  line-height: 0
  position: relative
  vertical-align: baseline

sup
  font-size: 75%
  line-height: 0
  position: relative
  vertical-align: baseline
  top: -0.5em

sub
  bottom: -0.25em

img
  max-width: 100%
  height: auto

svg:not(:root)
  overflow: hidden

figure
  margin: 0

fieldset
  border: 1px solid #c0c0c0
  margin: 0 2px
  padding: 0.35em 0.625em 0.75em

legend
  border: 0
  padding: 0

button, input, select, textarea
  font-family: inherit
  font-size: 100%
  margin: 0

button, input
  line-height: normal

button, select
  text-transform: none

button, html input[type="button"]
  -webkit-appearance: button
  cursor: pointer

input
  &[type="reset"], &[type="submit"]
    -webkit-appearance: button
    cursor: pointer

button[disabled], html input[disabled]
  cursor: default

input
  &[type="checkbox"], &[type="radio"]
    box-sizing: border-box
    padding: 0
  &[type="search"]
    -webkit-appearance: textfield
    -moz-box-sizing: content-box
    -webkit-box-sizing: content-box
    box-sizing: content-box
    &::-webkit-search-cancel-button, &::-webkit-search-decoration
      -webkit-appearance: none

button::-moz-focus-inner, input::-moz-focus-inner
  border: 0
  padding: 0

textarea
  overflow: auto
  vertical-align: top

table
  border-collapse: collapse
  border-spacing: 0
.clearfix
  &:before
    content: ""
    display: table
  &:after
    content: ""
    display: table
    clear: both
  zoom: 1
html
  font-family: sans-serif
  line-height: 1
  font-size: 16px

a
  text-decoration: none
  color: black

上一篇
30天掌握Sass語法 - (9)如何逐步建立自己的CSS資料庫
下一篇
30天掌握Sass語法 - (11)覺得Sass的寫法不適合你寫CSS嗎?那試試看SCSS吧!
系列文
30天掌握Sass語法41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
SunAllen
iT邦研究生 1 級 ‧ 2013-09-25 10:08:54

現在可以先看有個概念...等...落寞落寞...有穩定收入後,就可以好好學新東西了灑花灑花灑花

廖洧杰 iT邦高手 2 級 ‧ 2013-09-25 22:43:20 檢舉

一起加油^_^

我要留言

立即登入留言